<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>劲松商城后台</title>
<div th:include="Admin/public/Common::head"></div>
</head>
<body>
<div class="main-wrap">
	<div th:include="Admin/public/Common::menu"></div>

	<div class="content-wrap">
<div th:replace="Admin/public/Common::header"></div>
		<main class="main-cont content mCustomScrollbar">
			<div class="page-wrap">
				<!--开始::内容-->
				<section class="page-hd">
					<header>
						<h2 class="title">弹性盒子布局</h2>
						<p class="title-description">
							flex容器有单行多行和反转排列，具体查看CSS3相关文件，该模板仅提供页面常用
							布局结构，<em class="text-primary">单行平均布局</em>与<em class="text-primary">多行5列</em>布局。
							弹性盒子本无样式，具体内容间隔，亲们根据内容容器进行设置<em class="text-primary">外边距(margin)</em>或
							<em class="text-primary">内边距(padding)</em>设置。
						</p>
					</header>
					<hr>
				</section>
				<blockquote class="blockquote mb-10">
					CSS3弹性盒模型布局结构——<b>单行</b>样式
				</blockquote>
				<ul class="flex flex-nowrap">
					<li class="box-child">
						<div class="panel panel-primary mr-10">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·单行样式
							</div>
						</div>
					</li>
					<li class="box-child">
						<div class="panel panel-secondary mr-10">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·单行样式
							</div>
						</div>
					</li>
					<li class="box-child">
						<div class="panel panel-primary">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·单行样式
							</div>
						</div>
					</li>
				</ul>
				<blockquote class="blockquote mb-10">
					CSS3弹性盒模型布局结构——<b>两列多行</b>样式
				</blockquote>
				<ul class="flex flex-wrap flex-col-2">
					<li class="box-child">
						<div class="panel panel-primary mr-10">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·单行样式
							</div>
						</div>
					</li>
					<li class="box-child">
						<div class="panel panel-secondary">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·单行样式
							</div>
						</div>
					</li>
					<li class="box-child">
						<div class="panel panel-primary mr-10">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·两列多行样式
							</div>
						</div>
					</li>
					<li class="box-child">
						<div class="panel panel-primary">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·两列多行样式
							</div>
						</div>
					</li>
				</ul>
				<blockquote class="blockquote mb-10">
					CSS3弹性盒模型布局结构——<b>三列多行</b>样式
				</blockquote>
				<ul class="flex flex-wrap flex-col-3">
					<li class="box-child">
						<div class="panel panel-primary mr-10">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·三列多行样式
							</div>
						</div>
					</li>
					<li class="box-child">
						<div class="panel panel-secondary mr-10">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·三列多行样式
							</div>
						</div>
					</li>
					<li class="box-child">
						<div class="panel panel-primary">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·三列多行样式
							</div>
						</div>
					</li>
				</ul>
				<blockquote class="blockquote mb-10">
					CSS3弹性盒模型布局结构——<b>四列多行</b>样式
				</blockquote>
				<ul class="flex flex-wrap flex-col-4">
					<li class="box-child">
						<div class="panel panel-primary">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·四列多行样式
							</div>
						</div>
					</li>
					<li class="box-child">
						<div class="panel panel-secondary">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·四列多行样式
							</div>
						</div>
					</li>
					<li class="box-child">
						<div class="panel panel-primary">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·四列多行样式
							</div>
						</div>
					</li>
					<li class="box-child">
						<div class="panel panel-primary">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·四列多行样式
							</div>
						</div>
					</li>
				</ul>
				<blockquote class="blockquote mb-10">
					CSS3弹性盒模型布局结构——<b>五列多行</b>样式
				</blockquote>
				<ul class="flex flex-wrap flex-col-5">
					<li class="box-child">
						<div class="panel panel-primary">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·五列多行样式
							</div>
						</div>
					</li>
					<li class="box-child">
						<div class="panel panel-secondary">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·五列多行样式
							</div>
						</div>
					</li>
					<li class="box-child">
						<div class="panel panel-primary">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·五列多行样式
							</div>
						</div>
					</li>
					<li class="box-child">
						<div class="panel panel-primary">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·五列多行样式
							</div>
						</div>
					</li>
					<li class="box-child">
						<div class="panel panel-primary">
							<div class="panel-hd">弹性盒子布局</div>
							<div class="panel-bd">
								弹性盒子布局·五列多行样式
							</div>
						</div>
					</li>
				</ul>
				<!--开始::结束-->
			</div>
		</main>
		<div th:replace="Admin/public/Common::footer"></div>
	</div>
</div>
</body>
</html>
